<template>
	<view class="field-details field-padding">
		<view class="field-details-cover">
			<view class="">
				<u--image showLoading="true"
				src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
				 width="100%" height="400rpx"></u--image>
			</view>
		</view>
		
		<view class="field-details-content">
			<view class="title">婚礼场地</view>
			<view class="price">￥8888</view>
			<view class="tips">
				<view class="">场地：京信</view>
				<view class="">整套出租 | 400平方米 | 6室1厅 | 7床 | 宜住10人</view>
				<view class="error">不可免费取消</view>
			</view>
		</view>
		
		<view class="field-details-content">
			<view class="title">入房必读</view>
			<view class="tips">
				<view class="">防疫提示：</view>
				<view class="">1.</view>
				<view class="">2.</view>
				<view class="">3.</view>
				<view class="">4.</view>
			</view>
		</view>
		
		<view class="field-details-content">
			<view class="title title-phone">
				<view class="">预订电话：</view>
				<view class="phone">010-68450751</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data(){
			return {}
		}
	}
</script>
<style lang="scss" scope>
	.field-padding{
		padding: 0 10rpx;
	}
	.field-details{
		.field-details-content{
			box-shadow: 0 0 2px #cccccc;
			padding: 40rpx 30rpx;
			border-radius: 10rpx;
			margin: 30rpx 0;
			position: relative;
			.price{
				position: absolute;
				color: red;
				font-size: 30rpx;
				right: 50rpx;
				top: 40rpx;
			}
			.title{
				font-size: 32rpx;
				font-weight: bold;
			}
			.title-phone{
				display: flex;
				color: #333333;
				justify-content: space-between;
				.phone{
					color: red;
				}
			}
		.tips{
			padding-left: 20rpx;
			font-size: 24rpx;
			color: #333333;
			view{
				margin-top: 20rpx;
			}
			.error{
				color: red;
				margin-top: 30rpx;
			}
		}	
		}
	}
</style>